// h 函数也可以接受一个组件，第二个参数传递组件的 props 列表
import { h, render } from 'vue'
import XtxMessage from './message.vue'

type Props = {
    type: 'success' | 'error' | 'warning'
    text: string
    duration?: number
}

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)


let timer:number = -1
// 默认延迟2秒后关闭
export default function Message({ type, text, duration = 2000 }: Props) {
    const vNode = h(XtxMessage, { type, text })
    render(vNode, div)
    // 清除定时器 防止重复点击
    clearTimeout(timer)
    // 开启浏览器里的定时器
    timer = window.setTimeout(() => {
      render(null, div)
    }, duration)
}
// 封装方法
Message.error = function (text: string, duration = 2000) {
  Message({
      type: 'error',
      text,
      duration,
  })
}
Message.success = function (text: string, duration = 2000) {
  Message({
      type: 'success',
      text,
      duration,
  })
}
Message.warning = function (text: string, duration = 2000) {
  Message({
      type: 'warning',
      text,
      duration,
  })
}